<template>
    <div class="container">
        <div v-if='isverify'>
            <a-table style="width:80%;margin:0 auto;margin-top:5vh;" :pagination="false" :rowKey="record => record.id"
                :columns="columns" :dataSource="dataList" bordered>
                <template slot="tarList" slot-scope="record">
                    <a-tooltip>
                        <template slot="title">
                            {{record.tarList}}
                        </template>
                        <span>{{record.tarList | nameListFilter}}</span>
                    </a-tooltip>
                </template>
                <template slot="source" slot-scope="record">
                    <span>{{ record.source ? (record.source == 'update' ? '变更' : '新增') : ''}}</span>
                </template>
                <template slot="statusName" slot-scope="record">
                    <span>{{record.statusName}}</span>
                </template>
                <template slot="action" slot-scope="record">
                    <a-button @click='goStatusDetail(record.id,record.status)'>详情</a-button>
                </template>
            </a-table>
        </div>
        <div v-if='!isverify' class="nodata">
            暂无记录
        </div>
    </div>
</template>


<script>
    const columns = [
        {
            title: '提交时间',
            dataIndex: 'ctime',
            align: 'center'
        },
        {
            title: '分账名单',
            scopedSlots: { customRender: 'tarList' },
            align: 'center'
        },
        {
            title: '名单来源',
            scopedSlots: { customRender: 'source' },
            align: 'center'
        },
        {
            title: '审核状态',
            scopedSlots: { customRender: 'statusName' },
            align: 'center'
        },
        {
            title: '操作',
            scopedSlots: { customRender: 'action' },
            align: 'center'
        },
    ];
    import { message } from "ant-design-vue";
    import api from "@/common/api";
    import { mapState } from "vuex";
    export default {
        name: "listStatusQuery",
        data() {
            return {
                columns,
                dataList: [],
                isverify: true
            };
        },
        filters: {
            nameListFilter(value) {
                if (value.length > 16) {
                    return value.substring(0, 16) + '...'
                }
                return value

            }
        },
        computed: {
            ...mapState({
                imageSize: state => state.imageSize
            })
        },
        created() {
        },
        mounted() {
            // this.getAccountCheckList();
            // this.judeSubmitReceipt();
        },
        activated() {
            this.getAccountCheckList();
            this.judeSubmitReceipt();
        },
        watch: {

        },
        methods: {
            judeSubmitReceipt() {
                if (sessionStorage.getItem('isverify') == 'false') {
                    let data = {}
                    api.judeSubmitReceipt(data, res => {
                        if (res.code == 'OK') {
                            this.isverify = true;
                            sessionStorage.setItem('isverify', true)
                        } else {
                            this.isverify = false;
                            sessionStorage.setItem('isverify', false)
                        }
                    }, err => {
                        console.log('err', err)
                    })
                } else {

                }
            },
            getListDivHeight() {
                let aaa = setTimeout(function () {
                    let listDiv = document.getElementById("listDiv");
                    console.log(listDiv.offsetHeight);
                    console.log(listDiv.clientHeight);
                    let H = (document.body.clientHeight * 100 / 10000) * 65;
                    console.log(H)
                    if (listDiv.offsetHeight > H) {
                        listDiv.style.height = "65vh";
                    }
                }, 10);
            },
            goStatusDetail(id, status) {
                this.$router.push({ path: '/listStatusQueryDetail', query: { 'id': id, 'status': status } })
            },
            getAccountCheckList() {
                console.log('1243235435435435')
                let data = {
                    "data": {
                    },
                    "page": 1,
                    "pageSize": 10
                }
                api.subAccountCheckList(data, res => {
                    console.log(res)
                    if (res.code == 'OK') {
                        this.dataList = res.list;
                    }
                }, err => {
                })
            }
        }
    };
</script>

<style lang="less" scoped>
    .container {
        padding: 40px;
    }

    tr .column-money,
    tr .column-money {
        text-align: right !important;
    }

    #listDiv {
        overflow-y: auto;
    }

    /*滚动条样式*/
    #listDiv::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }

    #listDiv::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }

    #listDiv::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }

    .listDiv:nth-child(even) {
        background: #eee;
    }

    .nodata {
        margin: 20vh auto;
        text-align: center;
        color: #52506b;
    }
    /deep/.ant-table-thead>tr>th> {
        color: #52506b;
    }

</style>